
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- prueba -->
        <link href="resources/bootstrap-3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="resources/bootstrap-3.1.1/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
        <link href="resources/css/main-style.min.css" rel="stylesheet" type="text/css"/>
        <h:outputStylesheet library="css" name="primefaces-edit.min.css" />
        <link href="resources/css/menu-style-1.0.min.css" rel="stylesheet" type="text/css" />
        <!--
        <h:outputStylesheet library="css" name="menu-style-1.0.css" />
        -->
        <style>
            .ui-widget {
                font-size:12px !important;
            }
        </style>
    </h:head>
    <h:body>
        <div class="wrapper">
            <div class="box">
                <div class="row row-offcanvas row-offcanvas-left">
                    <!-- sidebar -->
                    <div class="column col-sm-2 col-xs-1 sidebar-offcanvas" id="sidebar" style="padding: 12px;">
                        <!-- Lista de Menús -->
                        <!--
                        <ui:include src="./pages/import/menu-left.xhtml" />
                        -->
                        <ui:include src="#{navigationController.navigationMenu}" />
                    </div>
                    <!-- /sidebar -->

                    <!-- main right col -->
                    <div class="column col-sm-10 col-xs-11" id="main">
                        <!-- RESPONSIVE MENÚ TOP-->
                        <ui:include src="./pages/import/menu-top.xhtml" />
                        <!-- /top nav -->

                        <div class="padding">
                            <div class="full col-sm-9">

                                <!-- content -->                      
                                <div class="row">
                                    <p:growl id="growl" showDetail="true"/>
                                    <p:panel id="panelContent" style="padding: 0%; margin: 0%;">
                                        <ui:include src="#{navigationController.navigationContent}" />
                                    </p:panel>
                                </div><!--/row-->

                                <hr />
                            </div><!-- /col-9 -->
                        </div><!-- /padding -->
                    </div>
                    <!-- /main -->

                </div>
            </div>
        </div>

        <!-- se activa si existe evento ajax -->
        <ui:insert name="status">
            <p:ajaxStatus
                style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
                <f:facet name="start">
                    <p:graphicImage value="/resources/images/loading.gif" />
                </f:facet>

                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>
        </ui:insert>

    </h:body>
    <!-- Latest compiled and minified JavaScript -->
    <h:outputScript name="js/bootstrap.min.js" library="bootstrap-3.1.1" />
    <script src="resources/js/menu-left.min.js"/>
    <script>
        $(document).ready(function() {
            var accordion_head = $('.accordion > li > a'),
                    accordion_body = $('.accordion li > .sub-menu');
            accordion_head.first().addClass('active').next().slideDown('normal');
            accordion_head.on('click', function(event) {
                event.preventDefault();
                if ($(this).attr('class') != 'active') {
                    accordion_body.slideUp('normal');
                    $(this).next().stop(true, true).slideToggle('normal');
                    accordion_head.removeClass('active');
                    $(this).addClass('active');
                }
            });
        });
    </script>
</html>

